<template>
  <view class="activity-card">
    <view class="card-header">
      <view class="card-title">
        <FeatherIcon
          :name="activityData.hasCheckedIn ? 'check-circle' : 'activity'"
          :size="20"
          :color="activityData.hasCheckedIn ? '#4cd137' : '#ff6b6b'"
        />
        <text>活跃度</text>
        <view class="checked-in-badge" v-if="activityData.hasCheckedIn">
          <text>今日已签到</text>
        </view>
      </view>
    </view>

    <view
      class="activity-content"
      @click="refreshLiveness"
      :class="{
        disabled: activityData.isRefreshing || activityData.refreshCooldown,
      }"
    >
      <view class="activity-progress-container">
        <view class="activity-progress-bar">
          <view
            class="activity-progress-fill"
            :class="{ 'checked-in': activityData.hasCheckedIn }"
            :style="{ width: `${activityData.percentage}%` }"
          ></view>
        </view>
        <view class="activity-value">{{ activityData.liveness }} / 100</view>
      </view>
    </view>

    <view class="activity-tips">
      <FeatherIcon name="info" size="16" color="#ff9800" />
      <text>{{ getLivenessTips }}</text>
      <view class="help-icon" @click.stop="navigateToLivenessDoc">
        <FeatherIcon name="help-circle" size="20" color="#999" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";

const props = defineProps({
  activityData: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["refresh-liveness"]);

// 活跃度提示
const getLivenessTips = computed(() => {
  if (props.activityData.liveness === 0) {
    return "今天的活跃度是0哦，赶快互动起来吧！发帖、评论、点赞都可以增加活跃度~";
  } else if (props.activityData.liveness < 30) {
    return "活跃度还很低哦，多参与社区互动，活跃度会快速提升！";
  } else if (props.activityData.liveness < 60) {
    return "活跃度正在稳步提升，继续加油！";
  } else if (props.activityData.liveness < 100) {
    return "活跃度已经很高了，再努把力就能获得神秘礼物！";
  } else {
    return "太棒了！今日活跃度已满，获得神秘礼物及明日天降红包资格！";
  }
});

// 刷新活跃度
const refreshLiveness = () => {
  emit("refresh-liveness");
};

// 跳转到活跃度文档
const navigateToLivenessDoc = () => {
  uni.navigateTo({
    url: `/pages/article/detail?id=1683775497629`,
  });
};
</script>

<style lang="scss">
.activity-card {
  margin: 24rpx;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .card-title {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      position: relative;

      text {
        margin-left: 8rpx;
      }

      .checked-in-badge {
        margin-left: 12rpx;
        background-color: rgba(76, 209, 55, 0.1);
        border-radius: 30rpx;
        padding: 4rpx 12rpx;
        padding-top: 0;

        text {
          font-size: 20rpx;
          color: #4cd137;
          font-weight: normal;
          margin-left: 0;
        }
      }
    }

    .refresh-hint {
      font-size: 24rpx;
      color: #999;
    }
  }

  .activity-content {
    padding: 16rpx 0;

    &.disabled {
      opacity: 0.7;
    }
  }

  .activity-progress-container {
    position: relative;

    .activity-progress-bar {
      height: 20rpx;
      background-color: #f0f0f0;
      border-radius: 10rpx;
      overflow: hidden;

      .activity-progress-fill {
        height: 100%;
        background: linear-gradient(to right, #ff6b6b, #ff9f43);
        border-radius: 10rpx;
        transition: width 0.5s ease-in-out;

        &.checked-in {
          background: linear-gradient(to right, #4cd137, #7bed9f);
        }
      }
    }

    .activity-value {
      position: absolute;
      right: 0;
      top: -40rpx;
      font-size: 24rpx;
      color: #666;
    }
  }

  .activity-tips {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    line-height: 1.4;
    position: relative;

    text {
      margin-left: 8rpx;
      flex: 1;
    }

    .help-icon {
      padding: 8rpx;
      border-radius: 50%;
      transition: all 0.3s;
      margin-left: 8rpx;

      &:active {
        background-color: rgba(0, 0, 0, 0.05);
        transform: scale(0.95);
      }
    }
  }
}
</style>
